@import "basic-style/basic/mixins.config";

$top-height: 40px;
$game-layout-height: 768px;
$footer-height: 98px;
$main-height: $game-layout-height - $top-height - $footer-height - 10;
$border-radius: 10px;
*{
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: rgba(#fff, .1);
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #333;
  }

  /* 非激活窗口 */
  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 255, 0, 0.4);
  }
}
body.uniq-body {
  background: {
    image: url("/ex_img/wog_infinity/main_container_bg.png");
    repeat: no-repeat;
    size: cover;
    position: center;
  };
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout {
  position: relative;
  width: 1140px;
  height: $game-layout-height;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border-radius: $border-radius;
  background: {
    image: url("/ex_img/wog_infinity/main_bg.png");
    repeat: no-repeat;
    size: cover;
    position: center;
  };

  &.is-mobile {
    //height: 100vw;
    //transform: rotate(90deg);
    //width: 100vh;
  }

  .header {
    height: $top-height;
    background-color: #1b1d22;
    border-radius: $border-radius $border-radius 0 0;
  }

  .main {
    height: $main-height;
  }

  .main-container {
    background-color: rgba(#432c1e, .5);
  }

  .footer {
    padding-top: 20px;
    height: $footer-height;

    .footer-other {
      height: 20px;
    }
  }

  // 在线面板
  .online-panel {
    display: none;
    position: absolute;
    right: -150px;
    top: 0;
    width: 150px;
    height: 100%;
  }

  .chat-view {
    height: 100px;
    background: $primary;
  }

  .mission-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }

  .peolist, .msn {
    position: fixed;
    z-index: 9;
    right: 0;
    bottom: 0;
    height: 0 !important;
    width: 0 !important;
  }
}

